<%@ page import="com.example.day_day_up.entity.vo.OnlineExamVO" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<style>
  .exam-info-box {
    margin-top: 20px;
    font-size: 14px;
    color: #555555;
  }

  .detail-label {
    font-weight: bold;
    margin-right: 10px;
  }

  .count-down-box {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
  }

  .count-down-img {
    width: 40px;
    height: 40px;
    margin-right: 20px;
  }

  .count-down-box span {
    font-size: 24px;
    font-weight: bold;
    color: #555555;
  }
</style>

<%
  String examId = request.getParameter("id");
  OnlineExamVO examDTO = (OnlineExamVO) session.getAttribute("exam_key" + examId);
  request.setAttribute("exam", examDTO);
%>

<h3>${exam.title}</h3>

<div class="count-down-box">
  <img src="../assets/images/定时关闭.png" alt="定时关闭" class="count-down-img">
  <div>
    <span class="hour"></span>
    <span class="minutes"></span>
    <span class="second"></span>
  </div>
</div>

<div class="exam-info-box">
  <div>
    <span class="detail-label">昵称：</span>
    <span class="detail-value">${user_key.nickname}</span>
  </div>
  <div>
    <span class="detail-label">学号：</span>
    <span class="detail-value">${user_key.id}</span>
  </div>
</div>

<div class="exam-info-box">
  <div>
    <span class="detail-label">题量：</span>
    <span class="detail-value">${exam.questionNum}</span>
  </div>
  <div>
    <span class="detail-label">考试时间：</span>
    <span class="detail-value">${exam.testTime}分钟</span>
  </div>
</div>

<script>
  const hour = document.querySelector('.hour')
  const minutes = document.querySelector('.minutes')
  const second = document.querySelector('.second')

  const inputTime = +new Date('${exam.testTime}')

  countDown()
  const countdownInterval = setInterval(countDown, 1000)

  function countDown() {
    const nowTime = +new Date()
    const times = (inputTime - nowTime) / 1000;
    let h = parseInt(times / 60 / 60 % 24);
    h = h < 10 ? '0' + h : h
    let m = parseInt(times / 60 % 60);
    m = m < 10 ? '0' + m : m
    let s = parseInt(times % 60);
    s = s < 10 ? '0' + s : s

    // 更新页面显示
    hour.innerHTML = h + ' :'
    minutes.innerHTML = m + ' :'
    second.innerHTML = s

    if (times <= 0) {
      // 倒计时结束时清除定时器
      clearInterval(countdownInterval)
      // 其他操作
    }
  }

</script>